<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>院士专家列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1 user-scalable=no">
	<meta name="mobile-web-app-capable" content="院士专家列表">
	<meta name="apple-mobile-web-app-capable" content="院士专家列表">
	<meta name="apple-touch-fullscreen" content="院士专家列表">
	<meta name="HandheldFriendly" content="院士专家列表">

	<link rel="stylesheet" href="${request.contextPath}/statics/css/materialize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/normalize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.carousel.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.theme.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.transitions.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/fakeLoader.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/style.css">
	<style>
		.btn2{
			border: none;
			border-radius: 15px;
			display: inline-block;
			height: 30px;
			line-height: 30px;
			outline: 0;
			padding: 0 2rem;
			text-transform: uppercase;
			vertical-align: middle;
			-webkit-tap-highlight-color: transparent;
			margin: 8px 0 0 0;
		}
		.view{
			background: #0E6EB8;
			color: #fff;
			box-shadow: none;
			padding-left: 20px;
			padding-right: 20px;
			border-radius: 15px;
			font-size: 14px;
			margin-right: 4px;
		}
		.expert-list{

		}
		.per-list{
			margin-top: 10px;
			background-color: #ffffff;
			border-radius: 10px;
			padding: 15px 12px 10px 12px;
		}
		.header{
			width:48px; float: left
		}
		.per-detail{
			width: calc(100% - 60px);
			margin: 0 0 0 12px;
			float: left
		}
		.per-name{
			font-size: 16px;
			font-weight: bold;
			color: #000000;
		}
		.per-desc{
			margin-left: 5px;
			font-size: 14px;
			color: #000000;
		}
		.per-intro{
			color: #666666;
			overflow: hidden;
			text-overflow: ellipsis;
			display:-webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin-right: 16px;
			height: 44px;
		}
</style>
</head>
<body style="background-color: #F5F5F5;">
	<!-- contact us -->
	<div class="pages" id="rrapp" style="margin-top: 0;">
		<div class="container">
			<div class="contact-us">
				<div class="row">
					<div class="expert-list">
						<div class="per-list" v-for="expert in expertList">
							<!--头像-->
							<div class="header">
								<img :src="expert.img" style="width:48px;border-radius: 50%">
							</div>
							<div class="per-detail">
								<div>
									<span class="per-name">{{expert.title}}</span>
									<span class="per-desc">{{expert.remark}}</span>
								</div>
								<div style="" class="per-intro" v-html="expert.content">
								</div>
							</div>
							<p style="text-align: right; ">
								<a @click="goExpertInfo(expert.id)" class="btn2 view">查看</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- end contact us -->
	
<!-- loader -->
	<div id="fakeLoader"></div>
	<!-- end loader -->

	
	<!-- scripts -->
	<script src="${request.contextPath}/statics/js/jquery.min.js"></script>
	<script src="${request.contextPath}/statics/js/materialize.min.js"></script>
	<script src="${request.contextPath}/statics/js/owl.carousel.min.js"></script>
	<script src="${request.contextPath}/statics/js/fakeLoader.min.js"></script>
	<script src="${request.contextPath}/statics/js/contact-form.js"></script>
	<script src="${request.contextPath}/statics/js/main.js"></script>
	<script src="../statics/js/vue.min.js"></script>
	<script>

		var vm = new Vue({
			el: '#rrapp',
			data: {
				expertList:[],
			},
			created: function(){
				this.queryExpertList();
			},
			methods:{
				queryExpertList(){
					$.ajax({
						type: 'GET',
						url: '${request.contextPath}/h5/queryExpertList/1',
						data: {},
						success: function (res) {
							console.log(res);
							if(res.code === 0){
								// alert("报名成功");
								vm.expertList = res.data;
							}else{
								alert(res.msg);
							}
						}
					})
				},
				goExpertInfo(id){
					window.location.href = '/h5/expert?id=' + id ;
				}

			},
		});

	</script>

</body>
</html>
